<template>
  <div
    class="daterange-picker"
    :class="customClass"
  >
    <picker
      mode="date"
      @change="onChangeStart"
      @cancel="onCancelStart"
      :value="startDate"
      :start="min"
      :end="max"
      :fields="fields"
      ref="start"
    >
      <slot name="start">
        <view class="daterange-picker__value"> {{startDate}} </view>
      </slot>
    </picker>
    <view class="daterange-picker__split"> {{splitText}} </view>
    <picker
      mode="date"
      @change="onChangeEnd"
      @cancel="onCancelEnd"
      :value="endDate"
      :start="min"
      :end="max"
      :fields="fields"
      ref="end"
    >
      <slot name="end">
        <view class="daterange-picker__value"> {{endDate}} </view>
      </slot>
    </picker>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    // 当前日期
    value: {
      type: Array,
      default: () => {
        return [
          new Date(),
          new Date()
        ]
      }
    },
    // 最小日期
    min: {
      type: [String, Number],
      default: ''
    },
    // 最大日期
    max: {
      type: [String, Number],
      default: ''
    },
    // 最大日期
    splitText: {
      type: String,
      default: '至'
    },
    // 日期最小层级
    fields: {
      type: String,
      default: 'day'
    },
    // 日期最小层级
    customClass: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      startDate: '',
      endDate: ''
    }
  },
  mounted () {
    this.setRangeDate(this.value)
  },
  watch: {
    value (v) {
      this.setRangeDate(v)
    }
  },
  created () {
    console.log('_____________created')
  },
  methods: {
    setRangeDate (v) {
      const dates = v.map(item => {
        return this.formatDate(item)
      })
      this.startDate = dates[0] || this.formatDate()
      this.endDate = dates[1] || this.formatDate()
    },
    formatDate (date) {
      return this.$moment(date).format('YYYY-MM-DD')
    },
    notice () {
      const startDate = this.$moment(this.startDate).startOf('day')
      const endDate = this.$moment(this.endDate).startOf('day')
      const dates = [
        this.startDate,
        this.endDate
      ]
      this.$emit('change', startDate.diff(endDate, 'days') < 0 ? dates : dates.reverse())
    },
    onChangeStart (e) {
      console.log('startPicker发送选择改变，携带值为', e.mp.detail.value)
      this.startDate = e.mp.detail.value
      this.notice()
    },
    onChangeEnd (e) {
      console.log('endPicker发送选择改变，携带值为', e.mp.detail.value)
      this.endDate = e.mp.detail.value
      this.notice()
    },
    onCancelStart (e) {
      // this.notice()
    },
    onCancelEnd (e) {
      // this.notice()
    }
  }
}
</script>

<style lang="less">
.daterange-picker {
  display: flex;
  align-items: center;
  font-family: UICTFontTextStyleBody;
  padding: 10px 16px;
  font-size: 14px;
  &__split {
    padding: 0 8px;
    font-size: 12px;
    opacity: 0.6;
  }
  &__value {
    position: relative;
    display: flex;
    align-items: center;
    &::after {
      content: "";
      margin-left: 8px;
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 4px solid currentColor;
    }
  }
  &__arrow {
    &::before,
    &::after {
      position: absolute;
      content: "";
      border-top: 10px transparent dashed;
      border-left: 10px transparent dashed;
      border-right: 10px transparent dashed;
      border-bottom: 10px #fff solid;
    }
    &::before {
      border-bottom: 10px #0099cc solid;
    }
    &::after {
      top: 1px; /*覆盖并错开1px*/
      border-bottom: 10px #fff solid;
    }
  }
}
</style>